<template>
  <div class="element-table">
    <!-- 表格 -->
    <h2>表格</h2>
    <el-table
      :data="tableData.filter((data) => !searchValue || data.name.toLowerCase().includes(searchValue.toLowerCase()))"
      style="width: 100%;"
    >
      <el-table-column label="Date" prop="date"></el-table-column>
      <el-table-column label="Name" prop="name"></el-table-column>
      <el-table-column label="Address" prop="address"></el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="searchValue" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'ElementTable',
  setup() {
    let searchValue = ref()
    const tableData = reactive([
      {
        date: '2016-05-02',
        name: '王大虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        date: '2016-05-01',
        name: '王中虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王老虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }
    ])
    const handleEdit = (index, row) => {
      console.log(index, row)
    }
    const handleDelete = (index, row) => {
      console.log(index, row, row.date)
    }
    return {
      tableData,
      searchValue,
      handleEdit,
      handleDelete
    }
  }
}
</script>
<style lang="scss">
.element-table {
  margin: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  text-align: left;
  h2 {
    margin: 10px 0;
  }
}
</style>
